<template>
  <div class="coupon">
    <div class="top">
      <div class="title">
        <i class="el-icon-s-marketing" /> 券码列表
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-top">
        <el-button
          v-for="(item, index) of buttonList"
          :key="index"
          :class="{ 'active': isActive === index }"
          @click="buttonClick(index)"
        >{{ item }}{{ '('+ 10 + ')' }}</el-button>
      </div>
      <div class="bottom-content d-flex-sb mt-35">
        <div class="d-flex">
          <Search placeholder="请输入您要搜索的内容" class="mr-15" />
          <el-form :inline="true" class="demo-form-inline mr-15" style="white-space: nowrap">
            <el-form-item label="使用类型：">
              <el-select v-model="value" clearable placeholder="全部" @change="selectChange">
                <el-option
                  v-for="item of classicList"
                  :key="item.id"
                  :label="item.kind_name"
                  :value="item.id"
                />
              </el-select>
            <!-- <el-cascader v-model="value" placeholder="全部" :options="classicList" clearable @change="handleChange" /> -->
            </el-form-item>
          </el-form>
        </div>
        <el-button type="primary" style="background: #00ADB3; border-color: #00ADB3" @click="addCoupon">添加券码</el-button>
      </div>
      <div class="bottom-table">
        <component :is="cmpName" />
      </div>
    </div>
    <add-coupon ref="addCoupon" />
  </div>
</template>
<script>
import Search from '@/common/search'
import PeddingTableList from './pedding-table-list'
import ResolveTableList from './resolve-table-list'
import AddCoupon from './add-coupon'
export default {
  components: {
    Search,
    PeddingTableList,
    ResolveTableList,
    AddCoupon
  },
  data() {
    return {
      buttonList: ['未使用', '已使用'],
      isActive: 0,
      value: '',
      classicList: [
        {
          id: 1,
          kind_name: '课程'
        }
      ],
      cmpName: PeddingTableList
    }
  },
  methods: {
    selectChange() {},
    addCoupon() {
      this.$refs.addCoupon.show()
    },
    buttonClick(index) {
      this.isActive = index
      switch (this.isActive) {
        case 0:
          this.cmpName = PeddingTableList
          break
        case 1:
          this.cmpName = ResolveTableList
          break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.coupon {
  box-sizing: border-box;
  background: #fff;
  height: 100%;
  flex: 1;
  .top {
    width: 100%;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(245, 108, 108, 1);
    font-size: 14px;
    font-family: Roboto;
    .title {
      line-height: 60px;
      color: rgba(68, 68, 68, 1);
      font-size: 18px;
      font-family: Roboto;
      font-weight: bold;
      border-bottom: 2px solid #ccc;
      padding: 0 20px;
    }
    ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      justify-content: space-around;
      padding: 30px 100px;
      li {
        list-style: none;
        cursor: pointer;
        h3 {
          line-height: 52px;
          color: rgba(245, 108, 108, 1);
          font-size: 36px;
          text-align: center;
          font-family: Roboto;
          margin: 0;
        }
        p {
          line-height: 20px;
          color: rgba(102, 102, 102, 1);
          font-size: 14px;
          text-align: center;
          font-family: Roboto;
          margin: 0;
        }
      }
    }
  }
  .bottom {
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 30px;
    .bottom-content {
      display: flex;
      align-items: center;
    }
  }
}
.el-button {
  background: #e5e5e5;
  &.active {
    background-color: #5a98de !important;
    color: #fff !important;
  }
}
.d-flex-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.d-flex{
  display: flex;
  align-items: center;
}
.el-form-item{
  margin: 0;
}
.mr-15{
  margin-right: 15px;
}
.mt-35{
  margin-top: 35px;
}
</style>
